<template>
  <view>
    <uv-popup ref="popup" mode="bottom" round="20">
      <view class="popup-agree-content">
        <view class="popup-agree-title">
          <text class="popup-agree-title-text">用户服务协议及隐私政策</text>
        </view>
        <view class="popup-agree-body">
          <view class="popup-agree-body-description">
            在您使用<text class="text-success">{{ appConfig.appName }}</text
            >过程中，您需要阅读并同意《用户协议》和《隐私政策》，请您务必仔细阅读，充分理解条款内容后再同意。
          </view>
          <view class="popup-agree-body-sub">
            点击同意即代表您已阅读并同意
            <text class="text-blue" @click="handleToAgreement('user')">《用户协议》</text>
            和
            <text class="text-blue" @click="handleToAgreement('privacy')">《隐私协议》</text>
          </view>
        </view>
        <view class="popup-agree-button-box">
          <view style="width: 150px; margin-right: 15px">
            <button class="border-olive popup-agree-button" @click="handleDisagree">不同意</button>
          </view>
          <button class="popup-agree-button bg-blue" @click="handleAgree">同意</button>
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<script lang="ts" setup name="VlPrivacyAgreement">
import appConfig from '@/appConfig'

const { proxy } = getCurrentInstance() as ComponentInternalInstance

defineProps({
  modelValue: {
    type: Boolean
  }
})
const emits = defineEmits(['update:modelValue'])

const popup = ref()
/** 同意 */
const handleAgree = () => {
  emits('update:modelValue', true);
  popup.value.close()
}

/** 打开用户协议 */
const handleToAgreement = (type) => {
  proxy?.$tab.navigateTo('/pages/common/agreement/index?type=' + type)
}

const handleDisagree = () => {
  popup.value.close()
}

const show = () => {
  popup.value.open()
}

defineExpose({
  show
})
</script>

<style lang="scss" scoped>
.popup-agree-content {
  background-color: #fff;
  border-top-left-radius: 11px;
  border-top-right-radius: 11px;

  .popup-agree-title {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 40px;

    .popup-agree-title-text {
      font-size: 16px;
      font-weight: bold;
    }
  }

  .popup-agree-body {
    justify-content: center;
    padding: 10px 0;
    font-size: 14px;

    .popup-agree-body-description {
      padding: 0 10px 20px;
      color: #666;
    }

    .popup-agree-body-sub {
      padding: 10px 10px;
      font-weight: bold;
      box-shadow: rgba(0, 0, 0, 0.1) 0px -5px 10px -5px;
      border-radius: 10px;
    }
  }

  .popup-agree-button-box {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    padding: 10px 15px;

    .popup-agree-button {
      flex: 1;
      border-radius: 50px;
      font-size: 16px;
    }

    .popup-agree-button::after {
      border-radius: 50px;
    }
  }
}
</style>
